<template>
	<view class="calendar-content" v-if="showCalendar">
		<uni-section title="我的日程" type="">
			<template v-slot:right>
				<button @click="clickBooking" style="background-color: #663d74; color: white;"
					:disabled="orderNum.sum<=0">点击预约</button>
			</template>
		</uni-section>
		<view class="flex_viw">
			<view class="flex_span">
				已服务： {{orderNum.used}}
			</view>
			<view class="flex_span">
				已预约： {{orderNum.toBeUse-orderNum.sum}}
			</view>
			<view class="flex_span">
				可预约： {{orderNum.sum}}
			</view>
		</view>
		<view>
			<uni-calendar :isDisable='true' class="uni-calendar--hook" :selected="selectedDate" :showMonth="true"
				@change="change" @monthSwitch="monthSwitch" />
		</view>
	</view>
</template>

<script>
	import {
		apiServiceList,
		apiServiceGetOrderNum,
		apiServiceAdd
	} from "@/api/time";

	function getDate(date, AddDayCount = 0) {
		if (!date) {
			date = new Date();
		}
		if (typeof date !== "object") {
			date = date.replace(/-/g, "/");
		}
		const dd = new Date(date);

		dd.setDate(dd.getDate() + AddDayCount); // 获取AddDayCount天后的日期

		const y = dd.getFullYear();
		const m =
			dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1; // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate(); // 获取当前几号，不足10补0
		return {
			fullDate: y + "-" + m + "-" + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		};
	}
	// 格式化数字
	function totime(num) {
		if (num < 10) {
			return "0" + num
		} else {
			return num
		}
	}
	// 传入月份 求下一个月
	function totimego1(num) {
		if (num != 12) {
			return totime(num + 1);
		} else {
			return "01";
		}
	}
	export default {
		components: {},
		data() {
			return {
				pattern: {},
				showCalendar: false,
				selectedDate: [],
				info: {
					lunar: true,
					range: true,
					insert: false,
					selected: [],
				},
				orderId: 0,
				orderNum: {
					used: 0,
					toBeUse: 0,
					sum: 0
				},
				date: '',
				startDateCopy: '',
				endDateCopy: '',
			};
		},
		onLoad(options) {
			this.orderId = options.id
			let date = getDate()
			let s_time = date.year + '-' + totime(Number(date.month)) + "-01"
			let e_time = date.year + '-' + totimego1(Number(date.month)) + "-01"
			if (Number(date.month) == 12) {
				e_time = (date.year + 1) + '-' + totimego1(Number(date.month)) + "-01"
			}
			console.log(s_time, e_time);
			this.selectFrom(s_time, e_time);
		},
		methods: {
			async clickBooking() {
				const param = {
					orderId: this.orderId,
					date: this.date,
					pageSize: 60,
					status: 0
				}
				// 用户预约
				await apiServiceAdd(param).then((res) => {
					wx.showToast({
						title: '预约成功',
						icon: 'success',
						duration: 1000
					})

					let startDate = getDate().year + "-" + getDate().month + "-01"
					let endDate = getDate().year + "-";


					if (Number(getDate().month) >= 9) {
						if (Number(e.month) == 12) {
							endDate = (Number(e.year) + 1) + "-01-01"
						} else {
							endDate += ((Number(getDate().month) + 1) + "-01")
						}
					} else {
						endDate += ("0" + (Number(getDate().month) + 1) + "-01")
					}



					this.selectFrom(startDate, this.endDateCopy ? this.endDateCopy : endDate)


				}).catch(e => {
					wx.showToast({
						title: e,
						icon: 'error',
						duration: 1000
					});
				})
			},
			change(e) {
				this.date = e.fulldate;
			},
			confirm(e) {
				console.log("confirm 返回:", e);
			},
			monthSwitch(e) {
				console.log("monthSwitchs 返回:", e);
				let startDate = e.year + "-"
				let endDate = e.year + "-"


				if (Number(e.month) >= 10) {
					startDate += (Number(e.month) + "-01")
				} else {
					startDate += ("0" + Number(e.month) + "-01")
				}

				if (Number(e.month) >= 9) {
					if (Number(e.month) == 12) {
						endDate = (Number(e.year) + 1) + "-01-01"
					} else {
						endDate += ((Number(e.month) + 1) + "-01")
					}
				} else {
					endDate += ("0" + (Number(e.month) + 1) + "-01")
				}


				this.startDateCopy = startDate
				this.endDateCopy = endDate
				this.selectFrom(startDate, endDate)
			},

			selectFrom(startDate, endDate) {
				const params = {
					startDate: startDate,
					endDate: endDate,
					pageSize: 60,
					orderId: this.orderId,
				};
				const orderNumParams = {
					orderId: this.orderId
				}
				apiServiceList(params).then((res) => {
					this.selectedDate = [];
					res.lists.forEach((item, index) => {
						const select = {
							date: item.date,
							info: item.status ? '包' : '约'
						};
						// this.$set(this.selectedDate, index, select);
						this.selectedDate.push(select)
					});

					this.showCalendar = true;
				});
				apiServiceGetOrderNum(orderNumParams)
					.then((res) => {
						this.orderNum.used = res.used;
						this.orderNum.toBeUse = res.toBeUse;
						this.orderNum.sum = res.sum;
					})
			},
		},
	};
</script>

<style lang="scss">
	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.calendar-button {
		flex: 1;
		font-weight: bold;
		font-size: 32rpx;
	}

	.uni-calendar-item--extra {
		color: #ccc !important;
	}

	.uni-calendar-item__weeks-lunar-text {
		color: green !important;
	}
	.uni-calendar-item--checked{
		background: #a998c8 !important;
	}
	.uni-calendar-item--isDay{
		background: #a998c8 !important;
	}
	
	.uni-calendar__weeks-item {
		border: 1px solid #ccc !important;
		border-radius: 1px !important;
	}

	.flex_viw {
		width: 100%;
		height: 30px;
		line-height: 30px;
		display: flex;

		// justify-content: center;
		.flex_span {
			width: 130px
		}
	}
</style>